import React, { Component } from 'react'
import { Icon } from 'antd-mobile'
import { TopNavHeader } from '../common'
import { Transaction } from './'

export default class HistoricalTransaction extends Component {
  constructor() {
    super()
    this.state = {
      modal: false,
    }
  }
  render() {
    const { modal } = this.state
    return (
      <div className={`rt-historical-transaction-container cm-flex-container`}>
        <TopNavHeader title="历史交易" />

        <p>最近30天交易记录</p>

        <div className={`rt-title-box`}>
          <span className={`rt-date`}>平仓日期</span>
          <span className={`rt-name`}>商品</span>
          <span className={`rt-amount`}>数量</span>
          <span className={`rt-direction`}>方向</span>
          <span className={`rt-delta`}>交易盈亏</span>
          <span className={`rt-placeholder`}></span>
        </div>

        <div className={`rt-scrollable-container`}>
          {
            Array(1).fill(1).map(v => (
              <div
                className={`rt-transaction-box`}
                key={Math.random()}
                onClick={() => {
                  this.setState({modal: true})
                }}
              >
                <span className={`rt-date`}>4月11日</span>
                <span className={`rt-name`}>3KG 工业银</span>
                <span className={`rt-lots`}>10手</span>
                <div>
                  <span className={`rt-green`}>跌</span>
                </div>
                <span className={`rt-delta rt-green`}>+24</span>
                <Icon type="right" />
              </div>
            ))
          }

          {
            Array(1).fill(1).map(v => (
              <div className={`rt-transaction-box`} key={Math.random()}>
                <span className={`rt-date`}>4月11日</span>
                <span className={`rt-name`}>3KG 工业银</span>
                <span className={`rt-lots`}>10手</span>
                <div>
                  <span>涨</span>
                </div>
                <span className={`rt-delta`}>+24</span>
                <Icon type="right" />
              </div>
            ))
          }
        </div>

        <Transaction visible={modal} onClose={() => this.setState({modal: false})} />
      </div>
    )
  }
}